<template>
  <view class="pending-container">
    <!-- Tab切换 -->
    <view class="tab-section">
      <view class="tab-list">
        <view 
          class="tab-item" 
          :class="{ 'active': activeTab === 'approving' }"
          @click="switchTab('approving')"
        >
          <text class="tab-text">待上架</text>
          <text class="tab-count" v-if="approvingCount > 0">({{ approvingCount }})</text>
        </view>
        <view 
          class="tab-item" 
          :class="{ 'active': activeTab === 'approved' }"
          @click="switchTab('approved')"
        >
          <text class="tab-text">待入库</text>
          <text class="tab-count" v-if="approvedCount > 0">({{ approvedCount }})</text>
        </view>
      </view>
    </view>

    <!-- 列表内容 -->
    <view class="list-section">
      <!-- 待上架列表 -->
      <view v-if="activeTab === 'approving'" class="list-content">
        <!-- 加载动画 -->
        <view v-if="approvingLoading && approvingList.length === 0" class="loading-state">
          <view class="loading-spinner"></view>
          <text class="loading-text">加载中...</text>
        </view>
        
        <view v-else-if="approvingList.length === 0" class="empty-state">
          <uni-icons type="info-filled" size="60" color="#ccc"></uni-icons>
          <text class="empty-text">暂无待上架的入库单</text>
        </view>
        
        <view v-else class="list-items">
          <view 
            class="list-item" 
            v-for="item in approvingList" 
            :key="item.recptId"
            @click="goToDetail(item)"
          >
            <view class="item-header">
              <text class="item-title">{{ item.recptCode }}</text>
              <view class="item-status status-approving">
                <text class="status-text">待审批</text>
              </view>
            </view>
            
            <view class="item-content">
              <view class="content-row">
                <text class="row-label">采购订单号</text>
                <text class="row-value">{{ item.poCode || '-' }}</text>
              </view>
              <view class="content-row">
                <text class="row-label">供应商</text>
                <text class="row-value">{{ item.vendorName || '-' }}</text>
              </view>
              <view class="content-row">
                <text class="row-label">入库日期</text>
                <text class="row-value">{{ item.recptDate || '-' }}</text>
              </view>
              <view class="content-row">
                <text class="row-label">备注</text>
                <text class="row-value">{{ item.remark }}</text>
              </view>
            </view>
            
            <view class="item-action">
              <uni-icons type="right" size="16" color="#999"></uni-icons>
            </view>
          </view>
        </view>
        
        <!-- 加载更多 -->
        <view v-if="approvingHasMore && approvingList.length > 0" class="load-more" @click="loadMoreApproving">
          <text class="load-text">{{ approvingLoading ? '加载中...' : '加载更多' }}</text>
        </view>
      </view>

      <!-- 待入库列表 -->
      <view v-if="activeTab === 'approved'" class="list-content">
        <!-- 加载动画 -->
        <view v-if="approvedLoading && approvedList.length === 0" class="loading-state">
          <view class="loading-spinner"></view>
          <text class="loading-text">加载中...</text>
        </view>
        
        <view v-else-if="approvedList.length === 0" class="empty-state">
          <uni-icons type="info-filled" size="60" color="#ccc"></uni-icons>
          <text class="empty-text">暂无待入库的入库单</text>
        </view>
        
        <view v-else class="list-items">
          <view 
            class="list-item" 
            v-for="item in approvedList" 
            :key="item.recptId"
            @click="goToDetail(item)"
          >
            <view class="item-header">
              <text class="item-title">{{ item.recptCode }}</text>
              <view class="item-status status-approved">
                <text class="status-text">已审批</text>
              </view>
            </view>
            
            <view class="item-content">
              <view class="content-row">
                <text class="row-label">采购订单号</text>
                <text class="row-value">{{ item.poCode || '-' }}</text>
              </view>
              <view class="content-row">
                <text class="row-label">供应商</text>
                <text class="row-value">{{ item.vendorName || '-' }}</text>
              </view>
              <view class="content-row">
                <text class="row-label">入库日期</text>
                <text class="row-value">{{ item.recptDate || '-' }}</text>
              </view>
              <view class="content-row" v-if="item.remark">
                <text class="row-label">备注</text>
                <text class="row-value">{{ item.remark }}</text>
              </view>
            </view>
            
            <view class="item-action">
              <uni-icons type="right" size="16" color="#999"></uni-icons>
            </view>
          </view>
        </view>
        
        <!-- 加载更多 -->
        <view v-if="approvedHasMore && approvedList.length > 0" class="load-more" @click="loadMoreApproved">
          <text class="load-text">{{ approvedLoading ? '加载中...' : '加载更多' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getItemRecptListByStatus } from '@/api/wm/itemrecpt.js'

export default {
  name: 'PendingList',
  data() {
    return {
      activeTab: 'approving', // 当前激活的tab
      
      // 待上架数据
      approvingList: [],
      approvingPageNum: 1,
      approvingPageSize: 10,
      approvingHasMore: true,
      approvingLoading: false,
      approvingCount: 0,
      
      // 待入库数据
      approvedList: [],
      approvedPageNum: 1,
      approvedPageSize: 10,
      approvedHasMore: true,
      approvedLoading: false,
      approvedCount: 0
    }
  },
  
  onLoad() {
    this.loadApprovingList()
  },
  
  onShow() {
    // 页面显示时刷新当前tab的数据
    if (this.activeTab === 'approving') {
      this.refreshApprovingList()
    } else {
      this.refreshApprovedList()
    }
  },
  
  methods: {
    // 切换tab
    switchTab(tab) {
      if (this.activeTab === tab) return
      
      this.activeTab = tab
      
      if (tab === 'approving' && this.approvingList.length === 0) {
        this.loadApprovingList()
      } else if (tab === 'approved' && this.approvedList.length === 0) {
        this.loadApprovedList()
      }
    },
    
    // 加载待上架列表
    loadApprovingList() {
      if (this.approvingLoading) return
      
      this.approvingLoading = true
      
      getItemRecptListByStatus(this.approvingPageNum, this.approvingPageSize, 'APPROVING').then(response => {
        // 根据实际响应结构调整数据获取方式
        const data = response.data || response
        
        // 根据实际API返回的数据结构处理
        if (this.approvingPageNum === 1) {
          this.approvingList = data.rows || []
        } else {
          this.approvingList = [...this.approvingList, ...(data.rows || [])]
        }
        
        // 根据总数和当前已加载数量判断是否还有更多数据
        const currentTotal = this.approvingList.length
        this.approvingHasMore = currentTotal < (data.total || 0)
        this.approvingCount = data.total || 0
        
      }).catch(error => {
        console.log('加载待上架列表失败:', error)
        if (error !== '500') {
          uni.showToast({ 
            title: '网络异常，请检查网络连接后重试', 
            icon: 'none',
            duration: 3000
          })
        }
      }).finally(() => {
        this.approvingLoading = false
      })
    },
    
    // 加载待入库列表
    loadApprovedList() {
      if (this.approvedLoading) return
      
      this.approvedLoading = true
      
      getItemRecptListByStatus(this.approvedPageNum, this.approvedPageSize, 'APPROVED').then(response => {
        // 根据实际响应结构调整数据获取方式
        const data = response.data || response
        
        // 根据实际API返回的数据结构处理
        if (this.approvedPageNum === 1) {
          this.approvedList = data.rows || []
        } else {
          this.approvedList = [...this.approvedList, ...(data.rows || [])]
        }
        
        // 根据总数和当前已加载数量判断是否还有更多数据
        const currentTotal = this.approvedList.length
        this.approvedHasMore = currentTotal < (data.total || 0)
        this.approvedCount = data.total || 0
        
      }).catch(error => {
        console.log('加载待入库列表失败:', error)
        if (error !== '500') {
          uni.showToast({ 
            title: '网络异常，请检查网络连接后重试', 
            icon: 'none',
            duration: 3000
          })
        }
      }).finally(() => {
        this.approvedLoading = false
      })
    },
    
    // 刷新待上架列表
    refreshApprovingList() {
      this.approvingPageNum = 1
      this.approvingHasMore = true
      this.loadApprovingList()
    },
    
    // 刷新待入库列表
    refreshApprovedList() {
      this.approvedPageNum = 1
      this.approvedHasMore = true
      this.loadApprovedList()
    },
    
    // 加载更多待上架
    loadMoreApproving() {
      if (this.approvingLoading || !this.approvingHasMore) return
      
      this.approvingPageNum++
      this.loadApprovingList()
    },
    
    // 加载更多待入库
    loadMoreApproved() {
      if (this.approvedLoading || !this.approvedHasMore) return
      
      this.approvedPageNum++
      this.loadApprovedList()
    },
    
    // 跳转到详情页
    goToDetail(item) {
      // 获取上一个页面实例并设置数据后返回
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]
      
      //传递recptId到主界面
      prevPage.$vm.setSelectedRecpt(item.recptId)
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.pending-container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.tab-section {
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .tab-list {
    display: flex;
    
    .tab-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24rpx 0;
      border-bottom: 4rpx solid transparent;
      transition: all 0.3s ease;
      
      &.active {
        border-bottom-color: #007AFF;
        
        .tab-text {
          color: #007AFF;
          font-weight: bold;
        }
        
        .tab-count {
          color: #007AFF;
        }
      }
      
      .tab-text {
        font-size: 28rpx;
        color: #666;
        transition: color 0.3s ease;
      }
      
      .tab-count {
        font-size: 24rpx;
        color: #999;
        margin-left: 8rpx;
        transition: color 0.3s ease;
      }
    }
  }
}

.list-section {
  .list-content {
    .loading-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80rpx 40rpx;
      background: #fff;
      border-radius: 12rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      
      .loading-spinner {
        width: 60rpx;
        height: 60rpx;
        border: 4rpx solid #f3f3f3;
        border-top: 4rpx solid #007AFF;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 20rpx;
      }
      
      .loading-text {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80rpx 40rpx;
      background: #fff;
      border-radius: 12rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      
      .empty-text {
        font-size: 28rpx;
        color: #999;
        margin-top: 20rpx;
      }
    }
    
    .list-items {
      .list-item {
        background: #fff;
        border-radius: 12rpx;
        margin-bottom: 20rpx;
        padding: 24rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        position: relative;
        
        &:active {
          transform: scale(0.98);
          box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.15);
        }
        
        .item-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20rpx;
          
          .item-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }
          
          .item-status {
            padding: 6rpx 12rpx;
            border-radius: 16rpx;
            font-size: 20rpx;
            
            &.status-approving {
              background: #fff3cd;
              color: #856404;
            }
            
            &.status-approved {
              background: #d1ecf1;
              color: #0c5460;
            }
            
            .status-text {
              font-size: 20rpx;
            }
          }
        }
        
        .item-content {
          padding-right: 60rpx; // 为跳转图标预留空间
          
          .content-row {
            display: flex;
            justify-content: space-between;
            padding: 8rpx 0;
            border-bottom: 1rpx solid #f0f0f0;
            
            &:last-child {
              border-bottom: none;
            }
            
            .row-label {
              font-size: 26rpx;
              color: #666;
              min-width: 140rpx;
            }
            
            .row-value {
              font-size: 26rpx;
              color: #333;
              flex: 1;
              text-align: right;
              word-break: break-all;
            }
          }
        }
        
        .item-action {
          position: absolute;
          right: 24rpx;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    
    .load-more {
      text-align: center;
      padding: 30rpx;
      background: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      
      .load-text {
        font-size: 28rpx;
        color: #007AFF;
      }
    }
  }
}

// 加载动画关键帧
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
